<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <!-- 若您需要使用Kendo UI Professional，请联系版权人获得合法的授权或许可。 -->
    <!-- Bootstrap css -->
    <link href="https://magicbox.bk.tencent.com/static_api/v3/assets/bootstrap-3.3.4/css/bootstrap.min.css"
          rel="stylesheet">


    <!--蓝鲸提供的公用样式库 -->

    <!--<link href="https://magicbox.bk.tencent.com/static_api/v3/bk/css/bk_pack.css" rel="stylesheet">-->

    <!-- font-awesome -->
    <link href="https://magicbox.bk.tencent.com/static_api/v3/assets/fontawesome/css/font-awesome.css" rel="stylesheet">
    <!--蓝鲸提供的公用样式库 -->
    <link href="https://magicbox.bk.tencent.com/static_api/v3/bk/css/bk.css" rel="stylesheet">
    <!-- 如果要使用Bootstrap的js插件，必须先调入jQuery -->
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/js/jquery-1.10.2.min.js"></script>
    <!-- 包括所有bootstrap的js插件或者可以根据需要使用的js插件调用　-->
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/bootstrap-3.3.4/js/bootstrap.min.js"></script>
    <!-- 包括所有kendoui的js插件或者可以根据需要使用的js插件调用　-->
    <!--<script src="https://magicbox.bk.tencent.com/static_api/v3/assets/kendoui-2015.2.624/js/kendo.all.min.js"></script>-->
    <script src="https://magicbox.bk.tencent.com/static_api/v3/bk/js/bk.js"></script>
    <!-- 以下两个插件用于在IE8以及以下版本浏览器支持HTML5元素和媒体查询，如果不需要用可以移除 -->
    <!--[if lt IE 9]>
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/js/html5shiv.min.js"></script>
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/js/respond.min.js"></script>
    <![endif]-->
    <!-- 数据埋点统计 -->
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/datatables-1.10.7/jquery.dataTables.js"
            type="text/javascript"></script>
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/datatables-1.10.7/dataTables.bootstrap.js"
            type="text/javascript"></script>
    <style type="text/css">
        .important {
            font-weight: bold;
        }
    </style>

</head>

<body class="bg-white" data-bg-color="bg-white">
<div class="king-page-box">
    <div class="king-layout1-header">
        <nav role="navigation" class="navbar navbar-default king-horizontal-nav2    f14 ">
            <div class="container " style="width:100%;overflow:hidden;">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed navbar-toggle-sm" data-toggle="collapse"
                            data-target="#king-horizontal-nav2-collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="javascript:;">
                        <img src="https://magicbox.bk.tencent.com/static_api/v3/bk/images/logo3.png" alt=""
                             class="logo"> </a>
                </div>
                <div class="collapse navbar-collapse navbar-responsive-collapse" id="king-horizontal-nav2-collapse">
                    <ul class="nav navbar-nav">
                        <!--鼠标经过，离开效果，-->
                        <li class="king-navbar-active"><a href="#first" onclick="first11(this)" onmouseover="dd(this)"
                                                          onmouseout="dd1(this)">首页</a></li>
                        <li><a href="#secend" onclick="secend11(this)" onmouseover="dd(this)" onmouseout="dd1(this)">数据统计</a>
                        </li>
                        <li><a href="javascript:void(0);">单据统计</a></li>
                    </ul>
                    <ul class="nav navbar-nav navbar-right">
                        <li>
                            <a href="javascript:;">
                                <span>管理者</span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </div>
    <div class="king-layout2-main mt15" style="width:960px;display: none" id="first">
        <!--HTML-->
        <div class="king-block king-block-bordered">
            <div class="king-block-header king-gray-light">
                <h3 class="king-block-title">综合示例</h3>
            </div>
            <div class="king-block-content">
                <table id="table2_demo4" class="table table-bordered table-striped">
                    <thead>
                    <tr>
                        <th>id</th>
                        <th>名字</th>
                        <th>工资</th>
                        <th>位置</th>
                        <th>分机号</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                </table>
            </div>
        </div>
        <!--<table class="table mb0 pr15 ranger-box2  ">-->
        <!--<thead>-->
        <!--<tr>-->
        <!--<th style="width: 70px;">#</th>-->
        <!--<th style="width: 15%;">名称</th>-->
        <!--<th style="width: 15%;">位置</th>-->
        <!--<th style="width: 15%;">日期</th>-->
        <!--<th style="width: 15%;">类型</th>-->
        <!--<th>操作</th>-->
        <!--</tr>-->
        <!--</thead>-->
        <!--<tbody>-->
        <!--<tr>-->
        <!--<td style="width: 70px;">1</td>-->
        <!--<td style="width: 15%;">Ravi Kumar</td>-->
        <!--<td style="width: 15%;">India</td>-->
        <!--<td style="width: 15%;">23/12/2012</td>-->
        <!--<td style="width: 15%;">Paid</td>-->
        <!--<td>-->
        <!--<button class="btn btn-xs btn-success"><i class="glyphicon glyphicon-ok"></i></button>-->
        <!--<button class="btn btn-xs btn-warning"><i class="glyphicon glyphicon-edit"></i></button>-->
        <!--<button class="btn btn-xs btn-danger"><i class="glyphicon glyphicon-remove"></i></button>-->
        <!--</td>-->
        <!--</tr>-->
        <!--<tr>-->
        <!--<td style="width: 70px;">2</td>-->
        <!--<td style="width: 15%;">Ravi Kumar</td>-->
        <!--<td style="width: 15%;">India</td>-->
        <!--<td style="width: 15%;">23/12/2012</td>-->
        <!--<td style="width: 15%;">Paid</td>-->
        <!--<td>-->
        <!--<button class="btn btn-xs btn-success"><i class="glyphicon glyphicon-ok"></i></button>-->
        <!--<button class="btn btn-xs btn-warning"><i class="glyphicon glyphicon-edit"></i></button>-->
        <!--<button class="btn btn-xs btn-danger"><i class="glyphicon glyphicon-remove"></i></button>-->
        <!--</td>-->
        <!--</tr>-->
        <!--<tr>-->
        <!--<td style="width: 70px;">3</td>-->
        <!--<td style="width: 15%;">Ravi Kumar</td>-->
        <!--<td style="width: 15%;">India</td>-->
        <!--<td style="width: 15%;">23/12/2012</td>-->
        <!--<td style="width: 15%;">Paid</td>-->
        <!--<td>-->
        <!--<button class="btn btn-xs btn-success"><i class="glyphicon glyphicon-ok"></i></button>-->
        <!--<button class="btn btn-xs btn-warning"><i class="glyphicon glyphicon-edit"></i></button>-->
        <!--<button class="btn btn-xs btn-danger"><i class="glyphicon glyphicon-remove"></i></button>-->
        <!--</td>-->
        <!--</tr>-->
        <!--<tr>-->
        <!--<td style="width: 70px;">4</td>-->
        <!--<td style="width: 15%;">Ravi Kumar</td>-->
        <!--<td style="width: 15%;">India</td>-->
        <!--<td style="width: 15%;">23/12/2012</td>-->
        <!--<td style="width: 15%;">Paid</td>-->
        <!--<td>-->
        <!--<button class="btn btn-xs btn-success"><i class="glyphicon glyphicon-ok"></i></button>-->
        <!--<button class="btn btn-xs btn-warning"><i class="glyphicon glyphicon-edit"></i></button>-->
        <!--<button class="btn btn-xs btn-danger"><i class="glyphicon glyphicon-remove"></i></button>-->
        <!--</td>-->
        <!--</tr>-->
        <!--<tr>-->
        <!--<td style="width: 70px;">5</td>-->
        <!--<td style="width: 15%;">Ravi Kumar</td>-->
        <!--<td style="width: 15%;">India</td>-->
        <!--<td style="width: 15%;">23/12/2012</td>-->
        <!--<td style="width: 15%;">Paid</td>-->
        <!--<td>-->
        <!--<button class="btn btn-xs btn-success"><i class="glyphicon glyphicon-ok"></i></button>-->
        <!--<button class="btn btn-xs btn-warning"><i class="glyphicon glyphicon-edit"></i></button>-->
        <!--<button class="btn btn-xs btn-danger"><i class="glyphicon glyphicon-remove"></i></button>-->
        <!--</td>-->
        <!--</tr>-->
        <!--<tr>-->
        <!--<td style="width: 70px;">6</td>-->
        <!--<td style="width: 15%;">Ravi Kumar</td>-->
        <!--<td style="width: 15%;">India</td>-->
        <!--<td style="width: 15%;">23/12/2012</td>-->
        <!--<td style="width: 15%;">Paid</td>-->
        <!--<td>-->
        <!--<button class="btn btn-xs btn-success"><i class="glyphicon glyphicon-ok"></i></button>-->
        <!--<button class="btn btn-xs btn-warning"><i class="glyphicon glyphicon-edit"></i></button>-->
        <!--<button class="btn btn-xs btn-danger"><i class="glyphicon glyphicon-remove"></i></button>-->
        <!--</td>-->
        <!--</tr>-->
        <!--</tbody>-->
        <!--</table>-->
        <!--<template id="header_tpl_15467497342302">-->
        <!--<tr>-->
        <!--<th style="width: 70px;">#index#</th>-->
        <!--<th style="width: 15%;">#name#</th>-->
        <!--<th style="width: 15%;">#position#</th>-->
        <!--<th style="width: 15%;">#date#</th>-->
        <!--<th style="width: 15%;">#type#</th>-->
        <!--<th>操作</th>-->
        <!--</tr>-->
        <!--</template>-->
        <!--<template id="tpl_15467497342302">-->
        <!--<tr>-->
        <!--<td style="width: 70px;">#index#</td>-->
        <!--<td style="width: 15%;">#name#</td>-->
        <!--<td style="width: 15%;">#position#</td>-->
        <!--<td style="width: 15%;">#date#</td>-->
        <!--<td style="width: 15%;">#type#</td>-->
        <!--<td>-->
        <!--<button class="btn btn-xs btn-success"><i class="glyphicon glyphicon-ok"></i></button>-->
        <!--<button class="btn btn-xs btn-warning"><i class="glyphicon glyphicon-edit"></i></button>-->
        <!--<button class="btn btn-xs btn-danger"><i class="glyphicon glyphicon-remove"></i></button>-->
        <!--</td>-->
        <!--</tr>-->
        <!--</template>-->
        <!-- 设置面板End -->
    </div>
    <div class="king-layout2-main mt15" style="width:960px;display: none;" id="secend">

        <p class="tooltip-options">
            这是一个
            <a href="#" data-toggle="tooltip" data-placement="bottom" title="<h2>'am Header2 </h2>">Tooltip 方法
                options</a>.
        </p>
        <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
            开始演示模态框
        </button>

        <!-- 模态框（Modal） -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
             aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                        <h4 class="modal-title" id="myModalLabel">
                            模态框（Modal）标题
                        </h4>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-sm-12">
                                <div class="king-block king-block-bordered">
                                    <div class="king-block-header king-gray-light">
                                        <ul class="king-block-options">
                                            <li>
                                                <button type="button"><i class="fa fa-cog"></i></button>
                                            </li>
                                        </ul>
                                        <h3 class="king-block-title">填写个人信息</h3>
                                    </div>
                                    <div class="king-block-content">
                                        <form class="form-horizontal" method="POST" onsubmit="return false" action="##">
                                            <div class="form-group">
                                                <label for="inputName" class="col-sm-3 control-label">用户名：</label>
                                                <div class="col-sm-7">
                                                    <input type="text" class="form-control" id="inputName"
                                                           placeholder="用户名/QQ号码/手机号码">
                                                </div>
                                                <span class="text-danger mt5 fl">*</span>
                                            </div>
                                            <div class="form-group">
                                                <label for="inputEmail" class="col-sm-3 control-label">邮箱：</label>
                                                <div class="col-sm-7">
                                                    <input type="email" class="form-control" id="inputEmail"
                                                           placeholder="输入邮箱帐号">

                                                </div>
                                                <span class="text-danger mt5 fl">*</span>
                                            </div>

                                            <div class="form-group">
                                                <label for="inputTel" class="col-sm-3 control-label">电话：</label>
                                                <div class="col-sm-7">
                                                       <input type="text" class="form-control" id="inputTel"
                                                           placeholder="手机号码">
                                                </div>
                                            </div>

                                            <div class="form-group">
                                                <label class="control-label col-sm-3">年龄：</label>
                                                <div class="col-sm-7">
                                                     <input type="text" class="form-control" id="inputAges"
                                                           placeholder="年龄">
                                                </div>
                                            </div>
                                            <div class="form-group has-feedback">
                                                <label class="control-label col-sm-3" for="introduction">个人说明：</label>
                                                <div class="col-sm-7">
                                                    <textarea class="form-control" rows="3"
                                                              id="introduction"></textarea>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <div class="col-sm-7 col-sm-offset-3">
                                                    <input type="button" class="king-btn king-success mr10"  onclick="submit11()" value="提交"/>
                                                    <input type="reset" class="king-btn king-default" value="取消"/>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>


                    </div>
                    <!--<div class="modal-footer">-->
                        <!--<button type="button" class="btn btn-default" data-dismiss="modal">-->
                            <!--关闭-->
                        <!--</button>-->
                        <!---->

                    <!--</div>-->
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->
    </div>
</div>
<!--<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">-->
<!--<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>-->
<!--<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>-->
<script>

    $(document).ready(function () {
        $("#first").show(); // todo 先运行一下，只首页显示
        var language = {
            search: '搜索：',
            lengthMenu: "每页显示 _MENU_ 记录",
            zeroRecords: "没找到相应的数据！",
            info: "分页 _PAGE_ / _PAGES_",
            infoEmpty: "暂无数据！",
            infoFiltered: "(从 _MAX_ 条数据中搜索)",
            paginate: {
                first: '首页',
                last: '尾页',
                previous: '上一页',
                next: '下一页',
            }
        }
        $("#table2_demo4").dataTable({
            autoWidth: false,
            lengthChange: true, //不允许用户改变表格每页显示的记录数
            pageLength: 5, //每页显示几条数据
            lengthMenu: [5, 10, 20], //每页显示选项
            pagingType: 'full_numbers',
            ajax: 'http://127.0.0.1:8000/study/get_user/',
// {"data": [{"id": "3", "name": "ddd", "tel": "111", "addr": "None", "age": "18"}, {"id": "4", "name": "ddd", "tel": "111", "addr": "None", "age": "18"}, {"id": "5", "name": "ddd", "tel": "111", "addr": "None", "age": "18"}, {"id": "6", "name": "ddd", "tel": "111", "addr": "None", "age": "18"}, {"id": "7", "name": "ddd", "tel": "111", "addr": "None", "age": "18"}, {"id": "8", "name": "ddd", "tel": "111", "addr": "None", "age": "18"}, {"id": "9", "name": "ddd", "tel": "111", "addr": "None", "age": "18"}, {"id": "10", "name": "ddd", "tel": "111", "addr": "None", "age": "18"}, {"id": "11", "name": "ddd", "tel": "111", "addr": "None", "age": "18"}, {"id": "12", "name": "ddd", "tel": "111", "addr": "None", "age": "18"}]}

            ordering: true,
            columns: [
                {data: "id", orderable: false},
                {data: "name"},
                {data: "tel"},
                {data: "addr"},
                {data: "age"},
                {
                    data: null,
                    orderable: false,
                    render: function (data, type, row, meta) {
                        return '<a class="king-btn king-default del">删除</a>';
                    }
                }
            ],
            language: language
        });

        var t = $("#table2_demo4").DataTable();//获取datatables对象
        //删除按钮绑定事件
        $("#table2_demo4 tbody").on('click', 'a.del', function () {
            var row = t.row($(this).parents('tr')),//获取按钮所在的行
                data = row.data();
            if (confirm('确定要删除' + data.name + ' ?')) {
                row.remove().draw();
            }

        });

    });

    function dd(obj) {
        $(obj).addClass("important")
    }

    function dd1(obj) {
        $(obj).removeClass("important")
    }

    function first11(obj) { // 点击首页
        $("#first").show();
        $("#secend").hide()
        $("li").removeClass("king-navbar-active")
        $(obj).parent().addClass("king-navbar-active")
    }

    function secend11(obj) { // 点击第二页
        $("#first").hide();
        $("#secend").show();
//        var tt = $("#secend").parent();
        $("li").removeClass("king-navbar-active")

        $(obj).parent().addClass("king-navbar-active")

    }

    // 第二页提示框
    $(function () {
        $(".tooltip-options a").tooltip({html: true});
    });


        function submit11() {

        var serializeObj = {};
        serializeObj["shuoming"] = $('#introduction').val();
        serializeObj["username"] = $('#inputName').val();
        serializeObj["mail"] = $('#inputEmail').val();
        serializeObj["tel"] = $('#inputTel').val();
        serializeObj["age"] = $('#inputAges').val();
        console.log(serializeObj)
        $.ajax({
            //几个参数需要注意一下
            type: "POST",//方法类型
            dataType: "json",//预期服务器返回的数据类型
            url: "http://127.0.0.1:8000/study/create_user/",//url
//            headers: {Accept: "application/json", "Content-Type": "application/json"}, // todo 这里不加，服务端用form 方式读取参数
//            data: JSON.stringify(serializeObj),
            data:serializeObj,
            success: function (result) {
                console.log(result);//打印服务端返回的数据(调试用)
                if (result.success) {
                    $('#myModal').modal('hide')
                }else{
                    alert("faile")
                }

            },
            error: function () {
                alert("异常！");
            }
        });
    }
</script>
</body>

</html>